<template>
  <div>
    <el-upload
      action
      :on-change="uploadChange"
      :file-list="fileList"
      list-type="picture-card"
      :http-request="upload"
      :on-remove="removeImg"
      :limit="limit"
      :on-exceed="fn"
      class="avatar-uploader"
    >
      <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar"> -->
      <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
      <div class="uploader">
        <span class="title">上传图片</span>
      </div>
    </el-upload>
  </div>
</template>
<script>
import COS from 'cos-js-sdk-v5'
var cos = new COS({
  SecretId: 'AKIDHNGzaBatIhu1ylMl6vXvKNH4kGF4tgNu',
  SecretKey: 'SxFLINQUTK0S1TtDONuUs1wjOoAMNktu'
})
export default {
  name: '',
  props: {},
  components: {},
  data () {
    return {
      limit: 2,
      dialogVisible: false,
      fileList: []
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    fn () {
      alert('您已超出上传图片个数限制')
    },
    removeImg (file) {
      // console.log(file)
      this.$emit('uploadSuccess', '')
    },

    uploadChange (file, fileList) {
      // console.log(fileList) // 1
      // console.log(this.fileList) // 0
      this.fileList = fileList
    },
    upload (file, fileList) {
      // console.log(file)
      // console.log(this.fileList)
      const uploadImg = this.fileList.find(item => item.uid === file.file.uid)
      uploadImg.status = 'uploading'
      uploadImg.percentage = 0
      const index = file.file.name.lastIndexOf('.')
      const ext = file.file.name.slice(index)
      cos.uploadFile({
        Bucket: 'img-1317543617', /* 填写自己的 bucket，必须字段 */
        Region: 'ap-beijing', /* 存储桶所在地域，必须字段 */
        Key: String(Date.now()) + String(Number.parseInt(Math.random() * 10000000000)) + ext, /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */
        Body: uploadImg.raw, // 上传文件对象
        SliceSize: 1024 * 1024 * 5, /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */
        // 上传进度
        onProgress: function (progressData) {
          uploadImg.percentage = progressData.percent * 100
          // console.log(JSON.stringify(progressData))
        }
      }, (err, data) => {
        if (err) {
          console.log('上传失败', err)
          uploadImg.status = 'fail'
        } else {
          console.log('上传成功')
          uploadImg.status = 'success'
          const imgUrl = 'http://' + data.Location
          // console.log(imgUrl)
          this.$emit('uploadSuccess', imgUrl)
          this.$emit('click')
        }
      })
      // cos.putBucketCors({
      //   Bucket: 'img-1317543617', /* 填写自己的 bucket，必须字段 */
      //   Region: 'ap-beijing', /* 存储桶所在地域，必须字段 */
      //   CORSRules: [{
      //     AllowedOrigin: ['*'],
      //     AllowedMethod: ['GET', 'POST', 'PUT', 'DELETE', 'HEAD'],
      //     AllowedHeader: ['*'],
      //     ExposeHeader: ['ETag', 'x-cos-acl', 'x-cos-version-id', 'x-cos-delete-marker', 'x-cos-server-side-encryption'],
      //     MaxAgeSeconds: '5'
      //   }]
      // }, function (err, data) {
      //   console.log(err || data)
      // })
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep{
  .uploader{
    position: absolute;
    top: 0;
    left: 0;
    // overflow: none !important;
    display: inline-block;
    width: 100px;
    height: 60px;
    line-height: 60px;
    // background-color: pink;
    .title{
      display: inline-block;
      // background-color: green;
      color:#aaa;
      width: 100px;
      font-size: 15px;
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .el-upload{
    width: 100px;
    height: 60px;
  }
  .el-upload-list__item {
    width: 100px;
    height: 60px;
  }
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar {
  width: 100px;
  height: 60px;
  display: block;
}

</style>
